<script setup>
import AMapLoader from '@amap/amap-jsapi-loader';
import { onMounted, onUnmounted, shallowRef, ref, reactive } from "vue";
import { loadCity, loadAreas, loadCoordinate } from '../api/index.js'
import iconimg from '../assets/icon/placeholder.png'
import image from '../assets/icon/2025-03-11 015830.png'
let map = shallowRef(null);

const address = ref('')
const newAMap = ref(null)

const coordinatePointArray = shallowRef({
  1: [
    [114.123456, 22.567890],
    [114.045678, 22.512345],
    [114.098765, 22.523456],
    [114.076543, 22.587654],
    [114.112233, 22.556677]
  ],
  2: [
    [114.891234, 25.845678],  // 约 5.2 公里
    [114.856789, 25.812345],  // 约 8.7 公里
    [114.912345, 25.823456],  // 约 12.1 公里
    [114.845678, 25.867890],  // 约 15.3 公里
    [114.923456, 25.801234]   // 约 18.6 公里
  ],
  3: [
    [109.612345, 35.021678],  // 约 7.3 公里
    [109.567890, 34.992345],  // 约 10.5 公里
    [109.623456, 34.987654],  // 约 14.2 公里
    [109.578901, 35.032109],  // 约 16.8 公里
    [109.634567, 35.008765]   // 约 19.1 公里
  ]
})

function onComplete(data) {
  // data是具体的定位信息
  console.log(data, ' data是具体的定位信息')
}

function onError(data) {
  // 定位出错
}

const bb = (() => {
  loadCity().then(res => {
    console.log(res)
  })


  loadAreas('183').then(res => {
    console.log(res)
  })


})


onMounted(() => {
  bb()
  window._AMapSecurityConfig = {
    securityJsCode: "6728bf256534bc0b91c0e20e4434e14f",//密钥
  };
  AMapLoader.load({
    key: "8821b1f63ec7a6b5a1553395a975da70", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.Scale", "AMap.HawkEye", "AMap.MapType", "AMap.ToolBar", "AMap.DistrictSearch", "AMap.Polygon"], //预加载插件，每一个需要使用的插件都要加入其中（并不会直接显示插件）需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  })
    .then((AMap) => {
      newAMap.value = AMap
      map.value = new AMap.Map("container", {
        // 设置地图容器id
        viewMode: "3D", // 是否为3D地图模式
        zoom: 11, // 初始化地图级别
        // center: ['109.593452', '35.005982'], // 初始化地图中心点位置
        pitch: 45, //地图俯仰角度，有效范围 0 度- 83 度，用于3d效果较多
      });


      // 手动添加比例尺插件
      map.value.addControl(new AMap.Scale());

      // 手动添加鹰眼插件
      map.value.addControl(new AMap.HawkEye({
        isOpen: true, // 默认展开
      }));

      //添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
      map.value.addControl(new AMap.MapType());


      //加减号控制地图的缩放、平移等
      map.value.addControl(new AMap.ToolBar({
        position: {
          top: '20px',
          left: '20px'
        }
      }))

      //添加定位控件，用来获取和展示用户主机所在的经纬度位置
      // map.value.addControl(new AMap.Geolocation());
    })
    .catch((e) => {
      console.log(e);
    });
});

onUnmounted(() => {
  map.value?.destroy();
});


const handleButton = async (text, number, districts) => {
  try {
    const res = await loadCoordinate({
      key: '41274e517f38c2eed4d1c700f9cc4164',
      address: text
    });
    const position = res.geocodes[0].location.split(",");
    console.log(position)
    await map.value.setCenter(position); // 地图跳转到坐标位置

    //使用 clearMap 方法删除所有覆盖物
    map.value.clearMap();




    coordinatePointArray.value[number].forEach(item => {
      //创建一个 Marker 实例：添加标记点
      const marker = new newAMap.value.Marker({
        position: new newAMap.value.LngLat(item[0], item[1]), //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        icon: new newAMap.value.Icon({
          image: iconimg, // 图片路径
          imageSize: new newAMap.value.Size(28, 28), // 图标显示大小
        }),
        title: number == 1 ? '深圳' : number == 2 ? '赣州' : '陕西',
      });
      //将创建的点标记添加到已有的地图实例：
      map.value.add(marker);

      //地图放大
      // map.value.setZoom(20);

      //创建点标记的点击事件
      marker.on("click", function (e) {
        //信息窗体的内容
        var content = [
          "<div style='width:20vw !important;'>",
          "<b style='color: cornflowerblue !important;'>高德软件有限公司</b>",
          `<img src=${image} style='width:100px;height:50px;'' alt=''>`,
          "电话 : 010-84107000   邮编 : 100102",
          "地址 : 北京市望京阜通东大街方恒国际中心A座16层</div>",
        ];
        //点击图标之后出现该地址的详细信息
        var infoWindow = new AMap.InfoWindow({
          content: content.join("<br>"), //传入字符串拼接的 DOM 元素
          offset: new AMap.Pixel(13, 0),//位置偏移（X轴，y轴）
        });

        //打开信息窗体
        infoWindow.open(map.value, e.target.getPosition()); //map 为当前地图的实例,e.target.getCenter()为当前点击的事件元对象的经纬度坐标信息
        console.log("你点击了Marker", e);
      });
    });

    //行政区查询,指定某区域高亮
    districtsHighlight(districts)
  } catch (error) {
    console.error("出错：", error);
  }
};


//行政区查询,指定某区域高亮，还需要在index.html文件配置密钥
const districtsHighlight = (text) => {
  //行政区查询插件
  var district = new newAMap.value.DistrictSearch({
    extensions: "all", //返回行政区边界坐标等具体信息
    level: "district", //设置查询行政区级别为区
  });
  district.search(text, function (status, result) {
    var bounds = result.districtList[0].boundaries; //获取朝阳区的边界信息
    if (bounds) {
      for (var i = 0; i < bounds.length; i++) {
        //生成行政区划 polygon
        var polygon = new newAMap.value.Polygon({
          map: map.value, //显示该覆盖物的地图对象
          strokeWeight: 1, //轮廓线宽度
          path: bounds[i], //多边形轮廓线的节点坐标数组
          fillOpacity: 0.7, //多边形填充透明度
          fillColor: "#CCF3FF", //多边形填充颜色
          strokeColor: "#CC66CC", //线条颜色
        });
      }
      map.value.setFitView(); //将覆盖物调整到合适视野
    }

    //地图放大,需要添加定时器，否则放大效果会被map.value.setFitView()这个方法覆盖，从而回缩视图
    setTimeout(() => {
      map.value.setZoom(11);
    }, 500);
  });
}

</script>


<template>
  <div class="top">
    <button @click="handleButton('广东省深圳市龙岗区布吉街道', 1, '龙岗区')">深圳</button>
    <button @click="handleButton('江西省赣州市章贡区蟠龙镇', 2, '章贡区')">赣州</button>
    <button @click="handleButton('陕西省渭南市蒲城县尧山镇', 3, '蒲城县')">陕西</button>
  </div>
  <div id="container"></div>
</template>


<style scoped>
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 95vh;
}

.top {
  height: 5vh;
  width: 100%;
  display: flex;
  /* border: 1px solid red; */
  align-items: center;

  button {
    margin-left: 20px;
    background-color: cornflowerblue;
    color: aliceblue;
    border: 0px;
    border-radius: 5px;
    padding: 3px 20px;
  }
}
</style>
